<template>
  <div class="fba-list-w">
    <div class="fba-item-w" v-for="(item, i) in pdfList" :key="i">
      <div class="header flex-c">
        <h2>生产计划</h2>
        <img :src="brcode" />
        <h3>{{ item.billNo }}</h3>
        <p style="width: 120px; margin-left: 40px">打印人：{{ userStore.userName }}</p>
        <p style="width: 300px; margin-left: 40px">打印时间：{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</p>
      </div>
      <!-- 打印区域 -->
      <div>
        <div style="margin: 10px 0; font-size: 14px">
          <span style="margin-right: 30px">计划创建时间：{{ $setTime(item.gmtCreate) }}</span>
          <span style="margin-right: 30px">接单日期：{{ $setTime(item.gmtAccept, 'YYYY-MM-DD') }}</span>
          <span>期望交货日期：{{ $setTime(item.gmtExpectDelivery, 'YYYY-MM-DD') }}</span>
        </div>
        <div style="font-size: 18px">
          <span :style="`display: inline-block; margin-right: 10px; padding: 4px 10px; min-width: 100px; background-color: ${getMaterialColor(item)}`">{{ getMaterial(item) || '未知' }}</span>
          <span :style="`display: inline-block; padding: 4px 10px; min-width: 100px; background-color: ${$extract(productTypeMap[item.productType], 'color') || '#ffffff'}`">{{ $extract(productTypeMap[item.productType], 'name') || '未知' }}</span>
        </div>
        <div style="display: flex; margin-top: 5px; font-size: 14px">
          <div style="border: 1px solid #ddd; padding: 10px; width: 300px; margin-right: 10px; flex-shrink: 0">
            <p>SKU：{{ item.sku }}</p>
            <p>品类：{{ item.cateName }}</p>
            <p>规格：{{ getProductSpecs(item) }}</p>
            <p
              >数量：
              <span style="color: red">{{ item.productionAmt }}</span>
            </p>
            <p>入库仓：{{ item.warehouseName }}</p>
            <img v-for="(img, index) of item.productImg.split(',')" :key="index" :src="img" style="width: 280px; height: 280px; margin-top: 10px" />
          </div>
          <div style="flex: 1; border: 1px solid #ddd; font-size: 14px">
            <div style="padding: 10px">
              <p v-for="(prop, k) in item.purchaseSpecsArr" :key="k">
                <span>{{ prop.name }}：</span>
                <span>{{ getStrVal(prop.purchaseValue) }}</span>
              </p>
            </div>
            <div style="border-top: 1px solid #ddd; padding: 5px 10px; min-height: 60px">
              <p>备注：{{ item.remark }}</p>
            </div>
            <div style="border-bottom: 1px solid #ddd">
              <table border="1" cellSpacing="0" cellPadding="0" width="100%" style="border-collapse: collapse; font-size: 14px" bordercolor="#333333">
                <thead style="background-color: #f1f1f1">
                  <tr>
                    <td style="border-top: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center"> 配件 </td>
                    <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center"> 规格&尺寸 </td>
                    <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center"> 数量 </td>
                    <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center"> 重量（g） </td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(parts, j) in item.partsList" :key="j">
                    <td style="border-top: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center"> {{ parts.partsName }} </td>
                    <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center"> {{ parts.partsSpecs }}</td>
                    <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center"> {{ parts.partsAmt }} </td>
                    <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center"> {{ parts.partsWeight }} </td>
                  </tr>
                  <tr v-if="!(item.partsList && item.partsList.length)">
                    <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 5px; line-height: 1; text-align: center" colspan="4"> 无 </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <h3 style="font-weight: bold; line-height: 1; font-size: 16px; margin: 10px">工序卡</h3>
        <table style="border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 14px" border="1" cellSpacing="0" cellPadding="0" width="100%">
          <thead style="background-color: #f1f1f1">
            <tr>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px 5px; line-height: 1; text-align: center"> 序号 </td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px 5px; line-height: 1; text-align: center"> 工序 </td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px 5px; line-height: 1; text-align: center"> 下发数量 </td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px 5px; line-height: 1; text-align: center">师傅 </td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px 5px; line-height: 1; text-align: center">开始时间 </td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px 5px; line-height: 1; text-align: center">结束时间 </td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px 5px; line-height: 1; text-align: center">返回重量（g） </td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(procedure, j) in item.procedureList" :key="j">
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 12px 5px; line-height: 1; text-align: center"> {{ j + 1 }} </td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 12px 5px; line-height: 1; text-align: center">{{ procedure.procedureName }}</td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 12px 5px; line-height: 1; text-align: center"> {{ procedure.issuedAmt }}</td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 12px 5px; line-height: 1; text-align: center"> {{ procedure.masterWorker }}</td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 12px 5px; line-height: 1; text-align: center"> {{ procedure.gmtStart }}</td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 12px 5px; line-height: 1; text-align: center"> {{ procedure.gmtEnd }}</td>
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 12px 5px; line-height: 1; text-align: center"> {{ procedure.returnWeight }}</td>
            </tr>
            <tr v-if="!(item.procedureList && item.procedureList.length)">
              <td style="border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 12px 5px; line-height: 1; text-align: center" colspan="4"> 无 </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import brcode from '@/assets/brcode.png'
  import dayjs from 'dayjs'
  import { findProductionPlanPage } from '@/api/purchaseApplication'
  import { parseJson, getStrVal } from '@/utils'
  import useUserStore from '@/store/modules/user'
  const props = defineProps(['choosePrintRef'])
  const emits = defineEmits(['save'])
  onMounted(async () => {
    getPdfList()
  })

  const pdfList = ref<Array<any>>([])
  const tableLoading = ref(false)
  const userStore = useUserStore()

  let LODOP: any = {}
  const productTypeMap = {
    1: { name: '普货', color: '#FFFFFF' },
    2: { name: '打样', color: '#D7D7D7' },
    3: { name: '定制', color: '#81D3F8' },
  }

  // 获取材质
  function getMaterial(row: any) {
    let propArr = row.purchaseSpecsArr || []
    return propArr.find((el: any) => el.name == '材质')?.purchaseValue
  }
  // 设置材质背景色
  function getMaterialColor(row: any) {
    let material = getMaterial(row)
    if (material?.indexOf('银') > -1) {
      return '#F2F2F2'
    }
    if (material?.indexOf('K金') > -1) {
      return '#D9B406'
    }
    return '#ffffff'
  }

  // 获取打印列表
  async function getPdfList() {
    pdfList.value = []
    let ids = window.sessionStorage.getItem('productPlanId')
    if (!ids?.length) return
    tableLoading.value = true
    const res: any = await findProductionPlanPage({
      ids,
      pageSize: 1000,
      pageNum: 1,
    })
    tableLoading.value = false
    pdfList.value = res?.data?.records || []

    emits('save', pdfList.value)

    pdfList.value.forEach((el: any) => {
      if (!parseJson(el.purchaseSpecs, null)) {
        let purchaseSpecs = el.purchaseSpecs?.split('\n')
        el.purchaseSpecsArr = purchaseSpecs.map((prop: string) => {
          let propArr = prop ? prop.split('：') : []
          return {
            name: propArr[0],
            purchaseValue: propArr[1],
          }
        })
      }
    })
  }

  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }

  function getHtmlStr(item: any) {
    // 图片
    let imgSrcStr = ''
    item.productImg.split(',').forEach((e: any) => {
      imgSrcStr += `
        <img src="${e}" style="width: 240px; height: 240px; margin-top: 10px" /></br>
      `
    })
    // 属性
    let propsStr = ''
    item.purchaseSpecsArr?.forEach((prop: any) => {
      propsStr += `
        <p>
          <span>${prop.name}：</span>
          <span>${getStrVal(prop.purchaseValue)}</span>
        </p>`
    })
    // 配件
    let partsListStr = ''
    if (item.partsList?.length) {
      item.partsList.forEach((parts: any) => {
        partsListStr += `
          <tr>
            <td style="border-bottom: 1px solid #333; padding: 5px; line-height: 1; text-align: center"> ${parts.partsName || ''} </td>
            <td style="border-bottom: 1px solid #333; border-left: 1px solid #333; padding: 5px; line-height: 1; text-align: center"> ${parts.partsSpecs || ''} </td>
            <td style="border-bottom: 1px solid #333; border-left: 1px solid #333; padding: 5px; line-height: 1; text-align: center" > ${parts.partsAmt || ''} </td>
            <td style="border-bottom: 1px solid #333; border-left: 1px solid #333; padding: 5px; line-height: 1; text-align: center"> ${parts.partsWeight || ''} </td>
          </tr>`
      })
    } else {
      partsListStr = `
        <tr>
          <td colspan="4" style="border-bottom: 1px solid #333; padding: 5px; line-height: 1; text-align: center"> 无 </td>
        </tr>`
    }
    // 工序
    let procedureListStr = ''
    let procedureListStrStyle = 'border-bottom: 1px solid #333; border-left: 1px solid #333; padding: 10px 5px; line-height: 1; text-align: center'
    if (item.procedureList?.length) {
      item.procedureList.forEach((procedure: any, i: number) => {
        procedureListStr += `
          <tr>
            <td style="${procedureListStrStyle}"> ${i + 1} </td>
            <td style="${procedureListStrStyle}"> ${procedure.procedureName || ''} </td>
            <td style="${procedureListStrStyle}"> ${procedure.issuedAmt || ''} </td>
            <td style="${procedureListStrStyle}"> ${procedure.masterWorker || ''} </td>
            <td style="${procedureListStrStyle}"> ${procedure.gmtStart || ''} </td>
            <td style="${procedureListStrStyle}"> ${procedure.gmtEnd || ''} </td>
            <td style="${procedureListStrStyle}"> ${procedure.returnWeight || ''} </td>
          </tr>`
      })
    } else {
      procedureListStr = `
        <tr>
          <td colspan="7" style="border-bottom: 1px solid #333; padding: 10px 5px; line-height: 1; text-align: center"> 无 </td>
        </tr>`
    }
    return `
        <div style="line-height:1;border:1px solid #fff">
          <div style="margin: 10px 0; font-size: 14px">
            <span style="margin-right: 30px">计划创建时间：${dayjs(item.gmtCreate).format('YYYY-MM-DD HH:mm:ss')}</span>
            <span style="margin-right: 30px">接单日期：${dayjs(item.gmtAccept).format('YYYY-MM-DD')}</span>
            <span>期望交货日期：${dayjs(item.gmtExpectDelivery).format('YYYY-MM-DD')}</span>
          </div>
          <div style="font-size: 18px">
            <span style="display: inline-block; margin-right: 10px; padding: 4px 10px; min-width: 100px; background-color: ${getMaterialColor(item)}">${getMaterial(item) || '未知'}</span>
            <span style="display: inline-block; padding: 4px 10px; min-width: 100px; background-color: ${productTypeMap[item.productType]?.color}">${productTypeMap[item.productType]?.name || '未知'}</span>
          </div>
          <div style="display: flex; margin-top: 5px; font-size: 12px">
            <div style="border: 1px solid #333; padding: 10px; width: 260px; margin-right: 10px; flex-shrink: 0">
              <p>SKU：${item.sku}</p>
              <p>品类：${item.cateName}</p>
              <p>规格：${getProductSpecs(item)}</p>
              <p>数量：<span style="color: red">${item.productionAmt}</span></p>
              <p>入库仓：${item.warehouseName}</p>
              ${imgSrcStr}
            </div>
            <div style="flex: 1; border: 1px solid #333; font-size: 12px">
              <div style="padding: 10px">${propsStr}</div>
              <div style="border-top: 1px solid #333; border-bottom: 1px solid #333;padding: 5px 10px; min-height: 60px">
                <p>备注：${item.remark}</p>
              </div>
              <table style="font-size: 12px" border="0" cellSpacing="0" cellPadding="0" width="100%" style="font-size: 12px">
                <thead style="background-color: #f1f1f1">
                  <tr>
                    <td style="border-bottom: 1px solid #333; padding: 5px; line-height: 1; text-align: center"> 配件 </td>
                    <td style="border-bottom: 1px solid #333; border-left: 1px solid #333; padding: 5px; line-height: 1; text-align: center"> 规格&尺寸 </td>
                    <td style="border-bottom: 1px solid #333; border-left: 1px solid #333; padding: 5px; line-height: 1; text-align: center"> 数量 </td>
                    <td style="border-bottom: 1px solid #333; border-left: 1px solid #333; padding: 5px; line-height: 1; text-align: center"> 重量（g） </td>
                  </tr>
                </thead>
                <tbody>
                  ${partsListStr}
                </tbody>
              </table>
            </div>
          </div>
          <h3 style="font-weight: bold; line-height: 1; font-size: 16px; margin: 10px">工序卡</h3>
          <table style="border-top: 1px solid #333; border-right: 1px solid #333; font-size: 12px" border="0" cellSpacing="0" cellPadding="0" width="100%">
            <thead style="background-color: #f1f1f1">
              <tr>
                <td style="${procedureListStrStyle}"> 序号 </td>
                <td style="${procedureListStrStyle}"> 工序 </td>
                <td style="${procedureListStrStyle}"> 下发数量 </td>
                <td style="${procedureListStrStyle}">师傅 </td>
                <td style="${procedureListStrStyle}">开始时间 </td>
                <td style="${procedureListStrStyle}">结束时间 </td>
                <td style="${procedureListStrStyle}">返回重量（g） </td>
              </tr>
            </thead>
            <tbody>
              ${procedureListStr}
            </tbody>
          </table>
        </div>`
  }
  function addPrint() {
    // 纸张初始化
    LODOP.PRINT_INITA(0, 0, '210mm', '290mm', '打印计划单')

    //  指定打印机设备
    let { type, bridgeIDandName, printerIndex } = props.choosePrintRef.getBridgeInfo()
    if (type === 1) {
      LODOP.SET_BRIDGE_INDEX(bridgeIDandName + ',' + printerIndex)
    } else {
      LODOP.SET_PRINTER_INDEX(printerIndex)
    }

    LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1)
    pdfList.value.forEach((item: any, index: number) => {
      if (index > 0) {
        LODOP.NewPageA()
      }
      // 标题
      LODOP.SET_PRINT_STYLE('FontSize', 14)
      LODOP.SET_PRINT_STYLE('Bold', 1)
      LODOP.ADD_PRINT_TEXT('6mm', '3mm', '24mm', '6mm', '生产计划')
      // 条形码
      LODOP.ADD_PRINT_BARCODE('3mm', '26mm', '45mm', '10mm', '128B', item.billNo)
      LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
      // LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)

      // 单号
      LODOP.SET_PRINT_STYLE('FontSize', 12)
      LODOP.ADD_PRINT_TEXT('6mm', '67mm', 200, 40, item.billNo)

      LODOP.SET_PRINT_STYLE('Bold', 0)
      LODOP.SET_PRINT_STYLE('FontSize', 8)
      const pintTime = `
        <p style="font-size:12px;font-weight:normal">
          <span>打印人：${userStore.userName}</span>
          <span style="margin-left: 20px">打印时间：${dayjs().format('YYYY-MM-DD HH:mm:ss')}</span>
        </p>
      `
      LODOP.ADD_PRINT_HTML('6mm', '102mm', '300px', '40px', pintTime)

      LODOP.SET_PRINT_STYLE('FontSize', 10)

      // 头部基础信息
      let htmlStr = getHtmlStr(item)
      LODOP.ADD_PRINT_HTML('12mm', '3mm', '195mm', '90%', htmlStr)
    })
  }
  // 打印预览
  function toPrintPre() {
    addPrint()
    LODOP.PREVIEW()
  }

  function initLODOP(val: any) {
    LODOP = val
  }

  defineExpose({ toPrintPre, initLODOP })
</script>
<style lang="less" scoped>
  .fba-list-w {
    flex: 1;
    height: calc(100vh - @menuHeight);
    overflow-y: auto;
    margin-left: 5px;
    .fba-item-w {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 15px 15px 50px;
      width: 1200px;
      height: 1200px;
      position: relative;
      .header {
        h2 {
          font-size: 18px;
          font-weight: bold;
        }
        h3 {
          font-weight: bold;
        }
        img {
          width: 160px;
          height: 30px;
          margin: 0 10px;
        }
      }
      .print-header {
        margin: 8px 0;
      }
      .fba-header {
        padding: 5px;
        background-color: var(--color-neutral-2);
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 8px;
        p {
          width: 20%;
          line-height: 24px;
          .label {
            color: #999;
          }
        }
      }
      .footer-sum {
        background-color: var(--color-neutral-2);
        border-bottom: 1px solid var(--color-neutral-3);
        border-top: none;
        display: flex;
        flex-wrap: wrap;
        padding: 5px 10px;
        p {
          margin-right: 50px;
        }
      }
      .footer-page {
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        left: 50%;
        transform: translate(-50%);
      }
    }
  }
</style>
